<template>
  <div class="about-page bg-bg-primary">
    <!-- 关于我页面头部 -->
    <section class="about-header bg-bg-secondary py-16">
      <div class="layout-container">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
          <div class="about-content order-2 md:order-1">
            <h1 class="text-4xl font-bold mb-4 text-text-primary about-title">
              <span class="text-primary"> 关于我</span>
            </h1>
            <p class="text-lg text-text-secondary mb-6 about-description">
              我是一名热爱技术的全栈开发者，专注于创建优雅且高性能的Web应用。通过不断学习和实践，我致力于在技术领域不断探索和成长。
            </p>
            <div class="social-links flex gap-4 about-social">
              <n-button
                circle
                tag="a"
                href="#"
                target="_blank"
                class="text-primary"
              >
                <n-icon>
                  <LogoGithub />
                </n-icon>
              </n-button>
              <n-button circle tag="a" href="#" target="_blank">
                <n-icon>
                  <LogoLinkedin />
                </n-icon>
              </n-button>
              <n-button circle tag="a" href="#" target="_blank">
                <n-icon>
                  <MailOutline />
                </n-icon>
              </n-button>
              <n-button circle tag="a" href="#" target="_blank">
                <n-icon>
                  <LogoTwitter />
                </n-icon>
              </n-button>
            </div>
          </div>
          <div class="about-image order-1 md:order-2 flex justify-center">
            <div class="profile-image-container">
              <!-- <img
                src="/images/profile.jpg"
                alt="个人照片"
                class="profile-image rounded-full shadow-lg w-64 h-64 object-cover border-4 border-white"
              /> -->
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 个人信息部分 -->
    <section class="personal-info py-12">
      <div class="layout-container">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div
            v-for="(item, index) in personalInfo"
            :key="index"
            class="info-card animate-item"
            :style="{ animationDelay: `${index * 0.1}s` }"
          >
            <div class="card h-full flex flex-col items-center text-center p-6">
              <div class="icon-container mb-4">
                <n-icon size="32" class="text-primary">
                  <component :is="item.icon" />
                </n-icon>
              </div>
              <h3 class="text-xl font-bold mb-2 text-text-primary">
                {{ item.title }}
              </h3>
              <p class="text-text-secondary">{{ item.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 我的故事部分 -->
    <section class="my-story py-12">
      <div class="layout-container">
        <h2 class="section-title animate-item">我的故事</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div class="animate-item" style="animation-delay: 0.1s">
            <div class="card p-6">
              <h3 class="text-xl font-bold mb-4 text-text-primary">职业道路</h3>
              <div class="space-y-4">
                <p class="text-text-secondary">
                  我的开发之旅始于大学时代对Web技术的好奇。通过自学HTML、CSS和JavaScript，我构建了我的第一个网站。这种创造的乐趣让我决定在这条道路上继续前行。
                </p>
                <p class="text-text-secondary">
                  毕业后，我有幸在多家公司工作，从初创企业到大型科技公司，这让我积累了丰富的实际项目经验。与不同背景的开发者合作，也让我学会了如何更有效地解决问题和协作完成项目。
                </p>
                <p class="text-text-secondary">
                  如今，我专注于全栈开发，善于使用现代框架和工具构建高质量的Web应用。我相信技术不仅是一种工具，更是实现创意和解决问题的途径。
                </p>
              </div>
            </div>
          </div>
          <div class="animate-item" style="animation-delay: 0.2s">
            <div class="card p-6">
              <h3 class="text-xl font-bold mb-4 text-text-primary">个人理念</h3>
              <div class="space-y-4">
                <p class="text-text-secondary">
                  我始终坚信，最好的代码是既能满足功能需求，又易于维护和理解的代码。我追求简洁、可读性强的解决方案，并注重代码质量和性能优化。
                </p>
                <p class="text-text-secondary">
                  持续学习是我的核心价值观之一。技术领域日新月异，保持好奇心和学习的热情对我来说至关重要。我定期参加技术讲座、阅读技术博客，并尝试新工具和框架。
                </p>
                <p class="text-text-secondary">
                  我也热衷于分享知识和经验。通过撰写技术博客、参与开源项目和指导新开发者，我希望能为开发社区做出自己的贡献。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 技能部分 -->
    <section class="skills-section py-12">
      <div class="layout-container">
        <h2 class="section-title animate-item">技能与专长</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div
            v-for="(category, index) in skillCategories"
            :key="index"
            class="skill-category animate-item"
            :style="{ animationDelay: `${index * 0.1}s` }"
          >
            <div class="card h-full p-6">
              <div class="flex items-center gap-3 mb-4">
                <n-icon size="24" class="text-primary">
                  <component :is="category.icon" />
                </n-icon>
                <h3 class="text-xl font-bold text-text-primary">
                  {{ category.title }}
                </h3>
              </div>
              <ul class="skill-list space-y-2">
                <li
                  v-for="(skill, skillIndex) in category.skills"
                  :key="skillIndex"
                  class="flex items-center gap-2"
                >
                  <n-icon size="16" class="text-primary">
                    <CheckmarkCircleOutline />
                  </n-icon>
                  <span class="text-text-secondary">{{ skill }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 兴趣部分 -->
    <section class="interests-section py-12">
      <div class="layout-container">
        <h2 class="section-title animate-item">兴趣爱好</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
          <div
            v-for="(interest, index) in interests"
            :key="index"
            class="interest-card animate-item"
            :style="{ animationDelay: `${index * 0.1}s` }"
          >
            <div class="card h-full p-6 text-center">
              <n-icon size="40" class="text-primary mb-4">
                <component :is="interest.icon" />
              </n-icon>
              <h3 class="text-lg font-bold mb-2 text-text-primary">
                {{ interest.title }}
              </h3>
              <p class="text-text-secondary">{{ interest.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我部分 -->
    <section class="contact-section py-16">
      <div class="layout-container">
        <div class="max-w-3xl mx-auto text-center animate-item">
          <h2 class="text-3xl font-bold mb-4 text-text-primary">与我联系</h2>
          <p class="text-lg text-text-secondary mb-8">
            无论是项目合作、技术交流还是职业机会，我都很乐意与您沟通。
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <n-input-group>
              <n-input placeholder="您的邮箱地址" />
              <n-button type="primary">
                发送信息
                <n-icon class="ml-1">
                  <SendOutline />
                </n-icon>
              </n-button>
            </n-input-group>
            <n-button size="large" ghost>
              <n-icon class="mr-1">
                <DocumentTextOutline />
              </n-icon>
              下载我的简历
            </n-button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import {
  LogoGithub,
  LogoLinkedin,
  LogoTwitter,
  MailOutline,
  SendOutline,
  DocumentTextOutline,
  CodeOutline,
  BrushOutline,
  ServerOutline,
  DesktopOutline,
  PeopleOutline,
  SchoolOutline,
  BookOutline,
  CheckmarkCircleOutline,
  HeartOutline,
  MusicalNotesOutline,
  AirplaneOutline,
  CameraOutline,
  FootballOutline,
} from "@vicons/ionicons5";

// 个人信息
const personalInfo = [
  {
    title: "3+ 年经验",
    description: "前端与全栈开发经验，参与多个商业项目和开源贡献",
    icon: CodeOutline,
  },
  {
    title: "10+ 项目",
    description: "完成了多个Web应用和移动应用项目，涵盖不同领域和需求",
    icon: DocumentTextOutline,
  },
  {
    title: "持续学习",
    description: "保持对新技术的学习，并积极参与技术社区交流和分享",
    icon: SchoolOutline,
  },
];

// 技能分类
const skillCategories = [
  {
    title: "前端开发",
    icon: CodeOutline,
    skills: [
      "HTML5, CSS3, JavaScript (ES6+)",
      "Vue.js, React, Angular",
      "TypeScript, Sass/SCSS",
      "TailwindCSS, Bootstrap",
      "Webpack, Vite, Rollup",
      "Jest, Cypress, Testing Library",
    ],
  },
  {
    title: "后端开发",
    icon: ServerOutline,
    skills: [
      "Node.js, Express, NestJS",
      "Python, Django, Flask",
      "RESTful API 设计",
      "GraphQL",
      "MongoDB, MySQL, PostgreSQL",
      "Redis, Docker, Kubernetes",
    ],
  },
  {
    title: "其他技能",
    icon: BrushOutline,
    skills: [
      "UI/UX 设计基础",
      "Figma, Adobe XD",
      "移动应用开发",
      "Flutter, React Native",
      "Git, CI/CD",
      "项目管理, 敏捷开发",
    ],
  },
];

// 兴趣爱好
const interests = [
  {
    title: "读书",
    description: "喜欢阅读技术书籍和科幻小说，拓展视野",
    icon: BookOutline,
  },
  {
    title: "音乐",
    description: "业余吉他爱好者，喜欢听各种类型的音乐",
    icon: MusicalNotesOutline,
  },
  {
    title: "旅行",
    description: "热爱探索不同的文化和风景",
    icon: AirplaneOutline,
  },
  {
    title: "摄影",
    description: "记录生活中美好的瞬间",
    icon: CameraOutline,
  },
];

// 使用 Intersection Observer 监测元素是否进入视口
onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("animate-visible");
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.1 }
  );

  // 观察所有需要动画的元素
  document.querySelectorAll(".animate-item").forEach((item) => {
    observer.observe(item);
  });
});
</script>

<style scoped>
.about-page {
  color: var(--text-primary);
}

/* 标题样式 */
.section-title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  color: var(--text-primary);
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

/* 头部样式 */
.about-header {
  position: relative;
  overflow: hidden;
}

.about-title {
  animation: fadeInUp 0.8s ease-out;
}

.about-description {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.about-social {
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.profile-image-container {
  animation: fadeIn 1s ease-out 0.3s both;
  position: relative;
}

.profile-image-container::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--primary-color), transparent);
  opacity: 0.1;
  z-index: -1;
}

/* 卡片样式 */
.card {
  background-color: var(--bg-secondary);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* 图标容器 */
.icon-container {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 50%;
}

/* 滚动触发动画 */
.animate-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 技能列表 */
.skill-list li {
  transition: transform 0.2s ease;
}

.skill-list li:hover {
  transform: translateX(5px);
}

/* 动画关键帧 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .card {
    padding: 1rem;
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  /* 调整个人信息卡片 */
  .personal-info .grid {
    gap: 1rem;
  }

  /* 调整"我的故事"部分 */
  .my-story .card {
    padding: 1.25rem;
  }

  /* 调整兴趣部分布局 */
  .interests .grid {
    gap: 1rem;
  }

  .interests .card {
    padding: 1rem;
  }

  /* 调整联系表单在移动端的布局 */
  .contact-section .grid {
    gap: 1rem;
  }
}

/* 特小屏幕的调整 */
@media (max-width: 480px) {
  .profile-image-container {
    width: 180px;
    height: 180px;
  }

  .section-title {
    font-size: 1.5rem;
  }
}
</style>
